import React from 'react'
import { useLocation } from 'umi'
import { Input, Tabs, Sticky, Card, Button, Toast, CountDown } from 'react-vant'
import { ArrowLeft, LocationO, Arrow } from '@react-vant/icons'
import { history } from 'umi'
import './zhifu.css'

export default function Zhixiang() {
    const location = useLocation()
    console.log(location.state.obj, "路由床惨");



    return (
        <div style={{ height: "100%" }}>
            <div style={{ height: "120%", background: "#e1e1e1" }}>
                <Sticky>
                    <div style={{ marginTop: "15px", background: "#fff" }}>
                        <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/zhi', { ids: 0 })}><ArrowLeft fontSize={25} /></p>
                        <p style={{ display: "inline-block" }}>订单详情---{location.state.obj.title}</p>
                    </div>
                </Sticky>
                <div style={{ width: "100%", height: "70px", background: "rgb(163, 201, 147)" }}>
                    {
                        location.state.obj.flag === 0 ?
                            <div>
                                <div style={{ height: "70px", overflow: "hidden" }}>
                                    <div style={{ marginTop: "15px" }}>
                                        <p style={{ color: "#fff", marginLeft: "20px", marginBottom: "5px" }}>等待卖家付款</p>
                                        <p style={{ color: "#fff", marginLeft: "20px" }}>
                                            {/* <span>剩余</span> */}
                                            <span><CountDown time={30 * 60 * 60 * 1000} style={{ color: "#fff" }} /></span>

                                        </p>

                                    </div>
                                </div>

                                <p></p>
                                <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                                    <div onClick={() => { console.log('去地址管理') }}>
                                        <p style={{ marginTop: "20px", marginLeft: "20px" }}>
                                            <span>
                                                <span style={{ marginRight: "20px" }}><LocationO /></span>
                                                收货人:张三 18812345678
                                            </span><br />
                                            <span style={{ float: "right", marginRight: "20px" }}>
                                                <Arrow />
                                            </span><br />
                                            <span style={{}}>收货地址:北京市朝阳区石佛营路5号 </span>
                                        </p>
                                    </div>
                                </Card>

                                <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                                    <p style={{ margin: "20px" }}>购物清单</p>
                                    <div>
                                        {
                                            [location.state.obj].map(item => (
                                                <div key={item._id} style={{ marginLeft: "20px" }}>
                                                    {
                                                        item.imgs.map((item2, index2) => (
                                                            <div key={index2} style={{ marginBottom: "15px" }}>
                                                                <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                                <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                                    <p>{item2.name}</p>
                                                                    <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                                    </p>
                                                                </div>

                                                                <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                            </div>

                                                        ))
                                                    }
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>

                                <div style={{ marginTop: "10px" }}>
                                    <Card >
                                        <ul style={{ marginTop: "20px" }} className='xiang'>
                                            <li >商品总价</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                            <li >优惠券</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >红包</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >包装费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                            <li >运费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                        </ul>
                                    </Card>
                                    <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                    <div style={{ height: "30px" }}>
                                        <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                                    </div>
                                </div>
                                <div>

                                </div>


                                <Sticky position='bottom'>
                                    <div style={{ height: "50px", textAlign: "right" }}>
                                        <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>取消订单</Button>
                                        <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即付款</Button>
                                    </div>
                                </Sticky>

                            </div>
                            : ""
                    }
                    {
                        location.state.obj.flag === 1 ?
                            <div>
                                <p style={{ lineHeight: "70px", marginLeft: "20px", color: "#fff" }}>等待发货</p>
                                <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                                    <div onClick={() => { console.log('去地址管理') }}>
                                        <p style={{ marginTop: "20px", marginLeft: "20px" }}>
                                            <span>
                                                <span style={{ marginRight: "20px" }}><LocationO /></span>
                                                收货人:张三 18812345678
                                            </span><br />
                                            <span style={{ float: "right", marginRight: "20px" }}>
                                                <Arrow />
                                            </span><br />
                                            <span style={{}}>收货地址:北京市朝阳区石佛营路5号 </span>
                                        </p>
                                    </div>
                                </Card>

                                <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                                    <p style={{ margin: "20px" }}>购物清单</p>
                                    <div>
                                        {
                                            [location.state.obj].map(item => (
                                                <div key={item._id} style={{ marginLeft: "20px" }}>
                                                    {
                                                        item.imgs.map((item2, index2) => (
                                                            <div key={index2} style={{ marginBottom: "15px" }}>
                                                                <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                                <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                                    <p>{item2.name}</p>
                                                                    <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                                    </p>
                                                                </div>

                                                                <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                            </div>

                                                        ))
                                                    }
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>

                                <div style={{ marginTop: "10px" }}>
                                    <Card >
                                        <ul style={{ marginTop: "20px" }} className='xiang'>
                                            <li >商品总价</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                            <li >优惠券</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >红包</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >包装费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                            <li >运费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                        </ul>
                                    </Card>
                                    <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                    <div style={{ height: "30px" }}>
                                        <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                                    </div>
                                </div>
                                <div>

                                </div>


                                <Sticky position='bottom'>
                                    <div style={{ height: "50px", textAlign: "right" }}>
                                        <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>取消订单</Button>
                                        <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即付款</Button>
                                    </div>
                                </Sticky>

                            </div>

                            : ""
                    }
                    {
                        location.state.obj.flag === 2 ?
                            // "卖家已发货" 
                            <div>
                                <p style={{ lineHeight: "70px", marginLeft: "20px", color: "#fff" }}>卖家已发货</p>
                                <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                                    <div onClick={() => { console.log('去地址管理') }}>
                                        <p style={{ marginTop: "20px", marginLeft: "20px" }}>
                                            <span>
                                                <span style={{ marginRight: "20px" }}><LocationO /></span>
                                                收货人:张三 18812345678
                                            </span><br />
                                            <span style={{ float: "right", marginRight: "20px" }}>
                                                <Arrow />
                                            </span><br />
                                            <span style={{}}>收货地址:北京市朝阳区石佛营路5号 </span>
                                        </p>
                                    </div>
                                </Card>

                                <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                                    <p style={{ margin: "20px" }}>购物清单</p>
                                    <div>
                                        {
                                            [location.state.obj].map(item => (
                                                <div key={item._id} style={{ marginLeft: "20px" }}>
                                                    {
                                                        item.imgs.map((item2, index2) => (
                                                            <div key={index2} style={{ marginBottom: "15px" }}>
                                                                <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                                <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                                    <p>{item2.name}</p>
                                                                    <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                                    </p>
                                                                </div>

                                                                <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                            </div>

                                                        ))
                                                    }
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>

                                <div style={{ marginTop: "10px" }}>
                                    <Card s>
                                        <ul style={{ marginTop: "20px" }} className='xiang'>
                                            <li >商品总价</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                            <li >优惠券</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >红包</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >包装费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                            <li >运费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                        </ul>
                                    </Card>
                                    <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                    <div style={{ height: "30px" }}>
                                        <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                                    </div>
                                </div>
                                <div>

                                </div>


                                <Sticky position='bottom'>
                                    <div style={{ height: "50px", textAlign: "right" }}>
                                        <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>取消订单</Button>
                                        <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即付款</Button>
                                    </div>
                                </Sticky>

                            </div>


                            :

                            ""
                    }
                    {
                        location.state.obj.flag === 3 ?
                            <div>
                                <p style={{ lineHeight: "70px", marginLeft: "20px", color: "#fff" }}>等待评价</p>
                                <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                                    <div onClick={() => { console.log('去地址管理') }}>
                                        <p style={{ marginTop: "20px", marginLeft: "20px" }}>
                                            <span>
                                                <span style={{ marginRight: "20px" }}><LocationO /></span>
                                                收货人:张三 18812345678
                                            </span><br />
                                            <span style={{ float: "right", marginRight: "20px" }}>
                                                <Arrow />
                                            </span><br />
                                            <span style={{}}>收货地址:北京市朝阳区石佛营路5号 </span>
                                        </p>
                                    </div>
                                </Card>
                                <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                                    <p style={{ margin: "20px" }}>购物清单</p>
                                    <div>
                                        {
                                            [location.state.obj].map(item => (
                                                <div key={item._id} style={{ marginLeft: "20px" }}>
                                                    {
                                                        item.imgs.map((item2, index2) => (
                                                            <div key={index2} style={{ marginBottom: "15px" }}>
                                                                <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                                <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                                    <p>{item2.name}</p>
                                                                    <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                                    </p>
                                                                </div>

                                                                <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                            </div>

                                                        ))
                                                    }
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>

                                <div style={{ marginTop: "10px" }}>
                                    <Card s>
                                        <ul style={{ marginTop: "20px" }} className='xiang'>
                                            <li >商品总价</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                            <li >优惠券</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >红包</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >包装费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                            <li >运费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                        </ul>
                                    </Card>
                                    <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                    <div style={{ height: "30px" }}>
                                        <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                                    </div>
                                </div>
                                <div>
                                </div>
                                <Sticky position='bottom'>
                                    <div style={{ height: "50px", textAlign: "right" }}>
                                        <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>取消订单</Button>
                                        <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即付款</Button>
                                    </div>
                                </Sticky>
                            </div>
                            : ""
                    }
                    {
                        location.state.obj.flag === 4 ?
                            <div>
                                <p style={{ lineHeight: "70px", marginLeft: "20px", color: "#fff" }}>交易完成</p>
                                <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                                    <div onClick={() => { console.log('去地址管理') }}>
                                        <p style={{ marginTop: "20px", marginLeft: "20px" }}>
                                            <span>
                                                <span style={{ marginRight: "20px" }}><LocationO /></span>
                                                收货人:张三 18812345678
                                            </span><br />
                                            <span style={{ float: "right", marginRight: "20px" }}>
                                                <Arrow />
                                            </span><br />
                                            <span style={{}}>收货地址:北京市朝阳区石佛营路5号 </span>
                                        </p>
                                    </div>
                                </Card>
                                <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                                    <p style={{ margin: "20px" }}>购物清单</p>
                                    <div>
                                        {
                                            [location.state.obj].map(item => (
                                                <div key={item._id} style={{ marginLeft: "20px" }}>
                                                    {
                                                        item.imgs.map((item2, index2) => (
                                                            <div key={index2} style={{ marginBottom: "15px" }}>
                                                                <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                                <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                                    <p>{item2.name}</p>
                                                                    <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                                    </p>
                                                                </div>

                                                                <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                            </div>

                                                        ))
                                                    }
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>

                                <div style={{ marginTop: "10px" }}>
                                    <Card s>
                                        <ul style={{ marginTop: "20px" }} className='xiang'>
                                            <li >商品总价</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                            <li >优惠券</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >红包</li>
                                            <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                            <li >包装费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                            <li >运费</li>
                                            <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                        </ul>
                                    </Card>
                                    <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                                    <div style={{ height: "30px" }}>
                                        <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                                    </div>
                                </div>
                                <div>
                                </div>
                                <Sticky position='bottom'>
                                    <div style={{ height: "50px", textAlign: "right" }}>
                                        <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>取消订单</Button>
                                        <Button round type='info' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>立即付款</Button>
                                    </div>
                                </Sticky>
                            </div>

                            : ""
                    }
                </div>
            </div >


        </div >
    )
}
